<template>
	<view class="my-bill-page">
		<view class="data-list">
			<view class="item" v-for="item in orderList">
				<view @click="goBillList(item.order_id, item.oid, item.type)">
					<view class="head" >
						
						<view class="total">
							<image style="width: 44rpx;height: 44rpx;margin-right: 16rpx;" src="../../static/images/user-msg-icon.png"></image>
							<view class="name">消息提醒</view>
						</view>
						<view class="status">{{item.add_time}}</view>
					</view>
					<view class="content">
						
						<view class="content-title" :class="item.type == 'waitpay' ? 'blue' : '' " >{{item.title}}</view>
						
						<view class="main-box">
							<view class="spec">订单编号<text class="item-content">{{item.order_id}}</text></view>
							<view class="spec" v-if="item.type=='waitpay' ||  item.type=='overdue'">待还金额<text class="item-content">{{item.price}}</text></view>
							<view class="spec" v-if="item.type=='waitpay' ||  item.type=='overdue'">当前租期<text class="item-content">{{item.lease}}</text></view>
						</view>
					</view>
					<view class="content-bottom">
						<view>查看详情</view>
						<image class="icon-right" src="../../static/images/icon-right.png"></image>
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" v-if="loading == true"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0 && !loading">
				<emptyPage title="暂无消息通知~"></emptyPage>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import {
		getOrderList,
		getStageBillPay2
	} from '@/api/order.js';
	import {
		getMessage,
		getNoReadCount
	} from '@/api/user.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				appType: app.globalData.appType,
				currentTab: 14,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				page: 1,
				limit: 20,
			}
		},
		onShow() {
			this.refresh()
			
			if (this.appType == 1) {
				getNoReadCount().then(res => {
					if (res.data[0] > 0) {
						uni.showTabBarRedDot({
							index: 2
						})
					} else {
						uni.hideTabBarRedDot({
							index: 2
						})
					}
				})
			}
		},
		methods: {
			goPay(id, arr) {
				uni.showLoading({
					title: '支付中'
				})
				getStageBillPay2(id, {
					order_id: arr
				}).then(res => {
					uni.hideLoading()
					const prePayTn = res.data.result.jsConfig.prePayTn
					my.tradePay({
						tradeNO: prePayTn ? prePayTn : res.data.result.jsConfig.tradeNo,
						success: (resd) => {
							if (
							  resd.resultCode == "9000" ||
							  resd.resultCode == "8000" ||
							  resd.resultCode == "6004"
							) {
							  uni.showToast({
							  	title: '支付成功'
							  })
							  this.refresh()
							} else {
								
								return that.$util.Tips({
									title: '支付失败'
								});
								
							}
						},
						fail: (resd) => {
							console.log(resd, "支付状态");
						}
					})
				})
			},
			refresh() {
				this.loading = false
				this.loadend = false
				this.loadTitle = '加载更多'
				this.page = 1
				this.$set(this, 'orderList', []);
				this.getOrderList()
			},
			goBillList(order_id, o_id, type) {
				if (!order_id)
					return that.$util.Tips({
						title: '缺少订单号无法查看订单详情'
					});
					
				if (type == 'waitpay' || type == 'reject') {
					uni.navigateTo({
						url: '/pages/lease/order-detail?order_id=' + order_id
					});
				} else {
					uni.navigateTo({
						url: '/pages/lease/my-bill-detail?order_id=' + order_id + '&o_id=' + o_id
					})
				}
			
			},
			changeTab(index) {
				this.loading = false
				this.loadend = false
				this.loadTitle = '加载更多'
				this.page = 1
				this.$set(this, 'orderList', []);
				this.currentTab = index
				this.getOrderList()
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				uni.showLoading({
					title: '加载中...'
				})
				getMessage({
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
						that.page = that.page + 1;
						uni.hideLoading()
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
						uni.hideLoading()
					});
			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	}
</script>

<style lang="scss">
	page { background-color: #F5F7FA; }
	.my-bill-page {
		.top-nav {
			padding: 0 24rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			
			.status {
				width: 340rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
				text-align: center;
				position: relative;
				
				&.active {
					color: #1F1F1F;
					font-weight: bold;
					
					&:after {
						content: " ";
						position: absolute;
						z-index: 2;
						left: 50%;
						bottom: -16rpx;
						width: 48rpx;
						height: 4rpx;
						background: #39CCC2;
						transform: translateX(-50%);
					}
				}
			}
		}
	
		.data-list {
			padding: 0 24rpx 24rpx 24rpx;
			
			.item {
				margin-top: 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				
				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.total {
						display: flex;
						align-items: flex-end;
						
						.name {
							font-size: 28rpx;
							font-weight: 400;
							color: #1F1F1F;
							line-height: 36rpx;
						}
						
						.price {
							margin-left: 12rpx;
							font-size: 36rpx;
							font-weight: bold;
							color: #FF1F2E;
							vertical-align: text-bottom;
							line-height: 36rpx;
							
							text {
								font-size: 28rpx;
							}
						}
					}
					
					.status {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			
				.time-range {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}
			
				.content {
					margin-top: 24rpx;
					padding: 24rpx 0;
					border-top: 2rpx solid #FAFAFA;
					border-bottom: 2rpx solid #FAFAFA;
					display: flex;
					flex-direction: column;
					
					// .pic {
					// 	width: 192rpx;
					// 	height: 192rpx;
					// 	background: #FFFFFF;
					// 	overflow: hidden;
					// 	border: 2rpx solid #F5F5F5;
					// 	border-radius: 16rpx;
						
					// 	image {
					// 		width: 100%;
					// 	}
					// }
					
					.content-title {
						margin-top: 24rpx;
						text-align: center;
						font-size: 36rpx;
						color: #FF271F;
						font-weight: bold;
					}
					
					.main-box {
						flex: 1;
						margin-top: 12rpx;
						
						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #1F1F1F;
							line-height: 48rpx;
							letter-spacing: 2rpx;
						}
						
						.spec {
							margin-top: 16rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 40rpx;
						}
						
						.item-content {
							margin-left: 24rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #1F1F1F;
							line-height: 40rpx;
						}
					}
				}
			
				.bottom {
					margin-top: 24rpx;
					display: flex;
					justify-content: flex-end;
					
					.btn {
						padding: 0 32rpx;
						height: 76rpx;
						line-height: 76rpx;
						background: #FFFFFF;
						border-radius: 38rpx;
						border: 2rpx solid #F5F5F5;
						text-align: center;
						
						&~.btn {
							margin-left: 24rpx;
						}
						
						&.topay {
							position: relative;
							background-color: #39CCC2;
							color: #fff;
							
							image {
								position: absolute;
								top: -20rpx;
								right: 0;
								width: 158rpx;
								height: 48rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.content-bottom {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #1F1F1F;
		
		.icon-right {
			width: 28rpx;
			height: 28rpx;
		}
	}
	
	.blue {
		color: #39CCC2 !important;
	}
</style>